<!--
 * @Author: 奶龙也是龙 15104937352@163.com
 * @Date: 2025-09-11 08:39:30
 * @LastEditors: 奶龙也是龙 15104937352@163.com
 * @LastEditTime: 2025-09-18 15:52:18
 * @FilePath: \大三前端\city\src\pages\components\Bottom1.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <Title :title="title"></Title>
        <!-- 提供图表容器 -->
        <div ref="bottom1" style="height: 150px;"></div>
    </div>
</template>

<script>
import { Line } from '@antv/g2plot';
import { get } from '@/utils/request';
export default {
    data() {
        return {
            title: '设备使用数量',
            //存放设备状态数据
            empData: []
        }
    },
    methods: {
        loadPie() {
            const linePlot = new Line(this.$refs.bottom1, {
                data:this.empData,
                xField: 'type',
                yField: 'value',
                stepType: 'vh',
                xAxis: {
                    label: {
                        //rotate: -45,
                        style: {
                            fill: "white",
                            fontSize: 6
                        }
                    }
                },
            });

            linePlot.render();
        },
        async getEmpData() {
            let res = await get('/dashboard/queryEngineerBindDeviceNumber');
            this.empData = res.data;
        }
    },
    async mounted() {
        await this.getEmpData();
        this.loadPie();
    }
}
</script>
<style lang="less" scoped></style>